<template>
	<div>
		<crudTable :config="config"></crudTable>
	</div>
</template>

<script setup>
import { ElMessage } from "element-plus"
import { ref } from "vue"
import api from "../../api/api"
import crudTable from "../../components/crudTable.vue"
import transformDate from "../../utils/transformDate"
const config = ref({
	// 请求的数据地址
	requestUrl: "/admin/articleComment/false",
	// 分页相关数据
	pageNum: 1,
	pageSize: 5,
	// 过滤数据函数
	fliterFn: (data) => {
		data.forEach(x => {
			x.sendDate = transformDate(x.sendDate)
		})
		return data
	},
	// 需要显示的数据
	TableColumns: [
		{
			prop: "article_title",
			label: "文章标题",
			width: ""
		}, {
			prop: "username",
			label: "用户名",
			width: ""
		}, {
			prop: "context",
			label: "评论内容",
			width: ""
		}
	],
	// 搜索的提示文本
	searchText: "搜索用户",
	searchKey: "username",
	// 排序内容
	sort: {
		sortKey: "sendDate",
		sortLabel: "评论时间",
		// 1为最开始
		sortPlace: 2
	},
	// 需要显示的按钮及对应操作方法
	operationBtns: [
		{
			title: "审核",
			size: "small",
			type: "primary",
			// 绑定对应的方法 直接调用 
			fn: (item) => {
				api.put(`/admin/articleComment/${item._id}`).then((res) => {
					if (res.data.status === 0) {
						ElMessage.success("审核成功!")
					} else {
						ElMessage.error("审核失败!")
					}
				})
			}
		},
	]
})
</script>

<style lang="scss" scoped>

</style>